<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title th:text="${template != null ? template.name : '打印模板'}">打印模板</title>
    <style>
        /* 通用样式 */
        body {
            margin: 0;
            padding: 0;
            font-family: SimSun, "Microsoft YaHei", Arial, sans-serif;
            font-size: 12pt;
            line-height: 1.5;
            background-color: white;
        }

        .print-container {
            position: relative;
            box-sizing: border-box;
            margin: 0 auto;
            page-break-after: always;
            background-color: white;
        }

        .print-element {
            position: absolute;
            box-sizing: border-box;
            transform-origin: center center;
        }

        /* 图片元素样式 */
        .image-element {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .image-element img {
            max-width: 100%;
            max-height: 100%;
        }

        /* 表格样式 */
        .table-element {
            width: 100%;
            border-collapse: collapse;
        }

        .table-element th,
        .table-element td {
            border: 1px solid black;
            padding: 4px;
            text-align: left;
        }

        .table-element th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        .table-element.zebra tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        /* 条码样式 */
        .barcode-element {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
        }

        .barcode-element img {
            max-width: 100%;
            max-height: calc(100% - 20px);
            object-fit: contain;
            background-color: inherit;
        }

        .barcode-text {
            margin-top: 5px;
            font-size: 12px;
            text-align: center;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .barcode-element.top-text {
            flex-direction: column-reverse;
        }

        .barcode-element.top-text .barcode-text {
            margin-top: 0;
            margin-bottom: 5px;
        }

        .qrcode-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qrcode-wrapper img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* 打印相关样式 */
        @page {
            margin: 0;
            size: [[${template != null ? template.paperSize : 'A4'}]] [[${template != null ? template.orientation : 'portrait'}]];
        }

        @media print {
            body {
                margin: 0;
                padding: 0;
            }

            .print-container {
                margin: 0;
                padding: 0;
            }

            /* 隐藏动画 */
            * {
                animation: none !important;
            }
        }
    </style>
    <!-- 根据纸张大小和方向设置容器宽高 -->
    <style th:inline="css" th:if="${template != null}">
        /* 根据模板配置的纸张和方向设置尺寸，1mm ≈ 3.78px */
        [(${template.paperSize=='A4_PAGE' && template.orientation=='portrait'} ? '.print-container { width: 794px; height: 1123px; }' : '')]
        [(${template.paperSize=='A4_PAGE' && template.orientation=='landscape'} ? '.print-container { width: 1123px; height: 794px; }' : '')]
        [(${template.paperSize=='A3_PAGE' && template.orientation=='portrait'} ? '.print-container { width: 1123px; height: 1588px; }' : '')]
        [(${template.paperSize=='A3_PAGE' && template.orientation=='landscape'} ? '.print-container { width: 1588px; height: 1123px; }' : '')]
        [(${template.paperSize=='A5_PAGE' && template.orientation=='portrait'} ? '.print-container { width: 559px; height: 794px; }' : '')]
        [(${template.paperSize=='A5_PAGE' && template.orientation=='landscape'} ? '.print-container { width: 794px; height: 559px; }' : '')]
        [(${template.paperSize=='LETTER_PAGE' && template.orientation=='portrait'} ? '.print-container { width: 816px; height: 1056px; }' : '')]
        [(${template.paperSize=='LETTER_PAGE' && template.orientation=='landscape'} ? '.print-container { width: 1056px; height: 816px; }' : '')]
        [(${template.paperSize=='CUSTOM_PAGE' && template.orientation=='portrait'} ? '.print-container { width: ' + ${template.width} + '; height: ' + ${template.height} + '; }' : '')]
        [(${template.paperSize=='CUSTOM_PAGE' && template.orientation=='landscape'} ? '.print-container { width: ' + ${template.height} + '; height: ' + ${template.width} + '; }' : '')]
    </style>
</head>

<body>
    <div class="print-container" th:style="${'width:' + template.width + ';height:' + template.height}">
        <!-- 遍历渲染所有元素 -->
        <div th:each="element : ${elements}" class="print-element"
            th:classappend="${element.type + '-element' +
                (element.animation?.type == 'fade' ? ' fade-in' : 
                (element.animation?.type == 'slide' && element.animation.direction == 'left' ? ' slide-in-left' : 
                (element.animation?.type == 'slide' && element.animation.direction == 'right' ? ' slide-in-right' : 
                (element.animation?.type == 'scale' ? ' scale-in' : ''))))}"
            th:style="${'position:' + (element.position ?: 'absolute') + ';' +
                     'left:' + (element.marginLeft ?: '0') + ';' +
                     'top:' + (element.marginTop ?: '0') + ';' +
                     'width:' + element.width + 'px;' + 
                     'height:' + element.height + 'px;' + 
                     'transform:rotate(' + (element.rotate ?: 0) + 'deg);' +
                     'transform-origin:' + (element.transformOrigin ?: 'center') + ';' +
                     'opacity:' + (element.opacity ?: 100) + '%;' +
                     (element.shadow?.enabled ? 'box-shadow:' + element.shadow.x + 'px ' + element.shadow.y + 'px ' + element.shadow.blur + 'px ' + element.shadow.color + ';' : '') +
                     (element.animation?.type != 'none' ? 'animation-duration:' + element.animation.duration + 'ms;animation-delay:' + element.animation.delay + 'ms;' : '')}">

            <!-- 文本元素 -->
            <div th:if="${element.type == 'text'}"
                th:style="${'font-size:' + (element.fontSize ?: 12) + 'px;' +
                         'font-weight:' + (element.bold ? 'bold' : 'normal') + ';' +
                         'font-style:' + (element.italic ? 'italic' : 'normal') + ';' +
                         'text-decoration:' + (element.underline ? 'underline' : 'none') + ';' +
                         'text-align:' + (element.align ?: 'left') + ';' +
                         'height: 100%;' +
                         'width: 100%;' +
                         'display: flex;' +
                         'padding: 4px;' +
                         'align-items: center;' +
                         'max-width:' + (element.width != null ? element.width + 'px' : 'none') + ';' +
                         'max-height:' + (element.height != null ? element.height + 'px' : 'none') + ';'}"
                th:utext="${#strings.replace(element.content, '\\n', '<br>')}">
            </div>

            <!-- 图片元素 -->
            <div th:if="${element.type == 'image'}" class="image-element">
                <img th:if="${element.src != null}"
                    th:src="${element.src}"
                    th:alt="${element.alt ?: ''}"
                    th:style="${'object-fit:' + (element.fit ?: 'contain') + ';' +
                             'width:' + (element.fit == 'contain' ? 'auto' : '100%') + ';' +
                             'height:' + (element.fit == 'contain' ? 'auto' : '100%') + ';' +
                             'max-width:' + (element.width != null ? element.width + 'px' : 'none') + ';' +
                             'max-height:' + (element.height != null ? element.height + 'px' : 'none') + ';'}">
            </div>

            <!-- 表格元素 -->
            <div th:if="${element.type == 'table'}" style="width:100%;height:100%;">
                <table th:class="${'table-element' + ((element.zebra != null && element.zebra) ? ' zebra' : '')}"
                    th:style="${'border-collapse:collapse;width:100%;table-layout:fixed;' +
                    (element.rowHeight != null ? 'line-height:' + element.rowHeight + 'px;' : '')}">
                    <thead th:if="${element.showHeader}">
                        <tr>
                            <th th:each="col : ${element.columns}"
                                th:style="${'width:' + (col.width != null ? col.width - 16 + 'px' : 'auto') + ';' +
                                         'text-align:' + (col.align == 'flex-start' ? 'left' : (col.align == 'flex-end' ? 'right' : 'center')) + ';' +
                                         'font-size:' + (col.fontSize != null ? col.fontSize : 12) + 'px;' +
                                         'white-space:' + ((col.wrap != null && col.wrap) ? 'normal' : 'nowrap') + ';' +
                                         'background-color: #f2f2f2;' +
                                         'font-weight: 500;' +
                                         'padding: 8px;' +
                                         'word-break: break-all;'}"
                                th:text="${col.title}">
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="row : ${element.rows}">
                            <td th:each="col : ${element.columns}"
                                th:style="${'text-align:' + (col.align == 'flex-start' ? 'left' : (col.align == 'flex-end' ? 'right' : 'center')) + ';' +
                                         'font-size:' + (col.fontSize != null ? col.fontSize : 12) + 'px;' +
                                         'white-space:' + ((col.wrap != null && col.wrap) ? 'normal' : 'nowrap') + ';' +
                                         'padding: 8px;' +
                                         'vertical-align: initial;' +
                                         'word-break: break-all;'}"
                                th:text="${row[col.field]}">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 条码元素 -->
            <div th:if="${element.type == 'barcode'}"
                th:class="${'barcode-element' + (element.textPosition == 'top' ? ' top-text' : '')}"
                th:style="${'background-color:' + (element.background ?: '#ffffff')}">
                <!-- 一维码 -->
                <div th:if="${element.barcodeType == 'barcode'}" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
                    <img th:if="${element.value != null}"
                        th:src="${element.value}"
                        th:style="${'max-width:100%;max-height:' + 
                                 (element.height != null and element.height != '' ? 
                                  (T(java.lang.Double).parseDouble(element.height.toString()) - (element.showLabel != null and element.showLabel == true ? 20 : 0)) : 
                                  100) + 
                                 'px;object-fit:contain;margin:5px;'}" />
                </div>
                <!-- 二维码 -->
                <div th:if="${element.barcodeType == 'qrcode'}" class="qrcode-wrapper">
                    <img th:if="${element.value != null}"
                        th:src="${element.value}"
                        style="max-width:100%;max-height:100%;object-fit:contain;" />
                </div>
                <!-- 条码文本 -->
                <div th:if="${element.showLabel}" class="barcode-text"
                    th:style="${'color:' + (element.foreground ?: '#000000') + ';' +
                             'font-size:' + (element.fontSize ?: 14) + 'px;'}"
                    th:text="${element.value}">
                </div>
            </div>

            <!-- 横线元素 -->
            <div th:if="${element.type == 'line'}"
                th:style="${'width:100%;' +
                         'height:' + (element.borderWidth ?: 1) + 'px;' +
                         'border-top:' + (element.borderWidth ?: 1) + 'px ' + (element.borderStyle ?: 'solid') + ' ' + (element.borderColor ?: '#000000') + ';' +
                         'background-color:' + (element.backgroundColor ?: 'transparent') + ';' +
                         'box-sizing:border-box;'}">
            </div>

            <!-- 矩形元素 -->
            <div th:if="${element.type == 'rectangle'}"
                th:style="${'width:100%;' +
                         'height:100%;' +
                         'box-sizing:border-box;' +
                         (element.borderStyle != null && element.borderStyle != 'none' ? 'border:' + (element.borderWidth ?: 1) + 'px ' + element.borderStyle + ' ' + (element.borderColor ?: '#000000') + ';' : '') +
                         (element.borderRadius != null && element.borderRadius > 0 ? 'border-radius:' + element.borderRadius + (element.borderRadiusUnit ?: 'px') + ';' : '') +
                         'background-color:' + (element.backgroundColor ?: 'transparent') + ';'}">
            </div>

            <!-- 表格容器元素 -->
            <div th:if="${element.type == 'table-container'}" style="width:100%;height:100%;position:relative;overflow:visible;">
                <table th:style="${'border-collapse:collapse;' +
                                 'width:' + (element.width != null ? element.width.toString().replace('px', '') : '400') + 'px;' +
                                 'height:' + (element.height != null ? element.height.toString().replace('px', '') : '300') + 'px;' +
                                 'border:' + (element.borderWidth ?: 1) + 'px ' + (element.borderStyle ?: 'solid') + ' ' + (element.borderColor ?: '#d9d9d9') + ';' +
                                 'margin:0;padding:0;table-layout:fixed;'}">
                    <colgroup>
                        <col th:each="colIndex : ${#numbers.sequence(0, element.containerCols - 1)}"
                             th:style="${'width:' + ((element.colWidths != null && element.colWidths.size() > colIndex) ? element.colWidths[colIndex] : (element.cellWidth ?: 120)) + 'px;'}" />
                    </colgroup>
                    <tbody>
                        <tr th:each="rowIndex : ${#numbers.sequence(0, element.containerRows - 1)}"
                            th:style="${'height:' + ((element.rowHeights != null && element.rowHeights.size() > rowIndex) ? element.rowHeights[rowIndex] : (element.cellHeight ?: 80)) + 'px;'}">
                            <th:block th:each="colIndex : ${#numbers.sequence(0, element.containerCols - 1)}">
                                <th:block th:each="c : ${element.cells != null ? element.cells : {}}"
                                          th:if="${c != null and c.row != null and c.row == rowIndex and c.col != null and c.col == colIndex and (c.isMerged == null or c.isMerged == false)}">
                                    <td th:rowspan="${c.rowspan != null && c.rowspan > 1 ? c.rowspan : 1}"
                                        th:colspan="${c.colspan != null && c.colspan > 1 ? c.colspan : 1}"
                                        th:style="${'border:' + (element.borderWidth ?: 1) + 'px ' + (element.borderStyle ?: 'solid') + ' ' + (element.borderColor ?: '#d9d9d9') + ';' +
                                                 'padding:4px;' +
                                                 'position:relative;' +
                                                 'vertical-align:top;' +
                                                 'background-color:#fff;'}">
                                        <div th:if="${c.elements != null && !c.elements.isEmpty()}" 
                                             th:style="${'width:100%;' +
                                                       'height:100%;' +
                                                       'position:relative;' +
                                                       'min-height:40px;' +
                                              'overflow-x:hidden;overflow-y:auto;' +
                                                       'display:flex;' +
                                                       'justify-content:' + ((c.horizontalAlign != null) ? (c.horizontalAlign == 'left' ? 'flex-start' : (c.horizontalAlign == 'center' ? 'center' : 'flex-end')) : 'flex-start') + ';' +
                                                       'align-items:' + ((c.verticalAlign != null) ? (c.verticalAlign == 'top' ? 'flex-start' : (c.verticalAlign == 'middle' ? 'center' : 'flex-end')) : 'flex-start') + ';' +
                                                       'flex-direction:column;'}">
                                            <!-- 渲染单元格内的元素 -->
                                            <div th:each="cellElement : ${c.elements}"
                                                 th:style="${'position:relative;' +
                                                           'width:' + (cellElement.width != null ? cellElement.width.toString().replace('px', '') : '100') + 'px;' +
                                                           'height:' + (cellElement.height != null ? cellElement.height.toString().replace('px', '') : 'auto') + 'px;' +
                                                           'margin-bottom:4px;' +
                                                           'overflow:hidden;'}">
                                                <!-- 文本元素 -->
                                                <div th:if="${cellElement.type == 'text'}"
                                                     th:style="${'font-size:' + (cellElement.fontSize ?: 12) + 'px;' +
                                                              'font-weight:' + (cellElement.bold ? 'bold' : 'normal') + ';' +
                                                              'font-style:' + (cellElement.italic ? 'italic' : 'normal') + ';' +
                                                              'text-decoration:' + (cellElement.underline ? 'underline' : 'none') + ';' +
                                                              'text-align:' + (cellElement.align ?: 'left') + ';' +
                                                              'width:100%;height:100%;padding:2px;'}"
                                                     th:utext="${#strings.replace(cellElement.content != null ? cellElement.content : '', '\\n', '<br>')}">
                                                </div>
                                                <!-- 图片元素 -->
                                                <div th:if="${cellElement.type == 'image'}" class="image-element">
                                                    <img th:if="${cellElement.src != null}"
                                                         th:src="${cellElement.src}"
                                                         th:alt="${cellElement.alt ?: ''}"
                                                         th:style="${'object-fit:' + (cellElement.fit ?: 'contain') + ';' +
                                                                  'width:' + (cellElement.fit == 'contain' ? 'auto' : '100%') + ';' +
                                                                  'height:' + (cellElement.fit == 'contain' ? 'auto' : '100%') + ';' +
                                                                  'max-width:100%;max-height:100%;'}">
                                                </div>
                                                <!-- 表格元素 -->
                                                <div th:if="${cellElement.type == 'table'}" style="width:100%;height:100%;">
                                                    <table th:class="${'table-element' + ((cellElement.zebra != null && cellElement.zebra) ? ' zebra' : '')}"
                                                           th:style="${'border-collapse:collapse;width:100%;table-layout:fixed;' +
                                                                    (cellElement.rowHeight != null ? 'line-height:' + cellElement.rowHeight + 'px;' : '')}">
                                                        <thead th:if="${cellElement.showHeader}">
                                                            <tr>
                                                                <th th:each="col : ${cellElement.columns}"
                                                                    th:style="${'width:' + (col.width != null ? col.width - 16 : 'auto') + 'px;' +
                                                                             'text-align:' + (col.align == 'flex-start' ? 'left' : (col.align == 'flex-end' ? 'right' : 'center')) + ';' +
                                                                             'font-size:' + (col.fontSize != null ? col.fontSize : 12) + 'px;' +
                                                                             'white-space:' + ((col.wrap != null && col.wrap) ? 'normal' : 'nowrap') + ';' +
                                                                             'background-color: #f2f2f2;font-weight: 500;padding: 8px;word-break: break-all;'}"
                                                                    th:text="${col.title}">
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr th:each="row : ${cellElement.rows}">
                                                                <td th:each="col : ${cellElement.columns}"
                                                                    th:style="${'text-align:' + (col.align == 'flex-start' ? 'left' : (col.align == 'flex-end' ? 'right' : 'center')) + ';' +
                                                                             'font-size:' + (col.fontSize != null ? col.fontSize : 12) + 'px;' +
                                                                             'white-space:' + ((col.wrap != null && col.wrap) ? 'normal' : 'nowrap') + ';' +
                                                                             'padding: 8px;vertical-align: initial;word-break: break-all;'}"
                                                                    th:text="${row[col.field]}">
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <!-- 条码元素 -->
                                                <div th:if="${cellElement.type == 'barcode'}"
                                                     th:class="${'barcode-element' + (cellElement.textPosition == 'top' ? ' top-text' : '')}"
                                                     th:style="${'background-color:' + (cellElement.background ?: '#ffffff')}">
                                                    <div th:if="${cellElement.barcodeType == 'barcode'}" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">
                                                        <img th:if="${cellElement.value != null}"
                                                             th:src="${cellElement.value}"
                                                             style="max-width:100%;max-height:100%;object-fit:contain;margin:5px;" />
                                                    </div>
                                                    <div th:if="${cellElement.barcodeType == 'qrcode'}" class="qrcode-wrapper">
                                                        <img th:if="${cellElement.value != null}"
                                                             th:src="${cellElement.value}"
                                                             style="max-width:100%;max-height:100%;object-fit:contain;" />
                                                    </div>
                                                    <div th:if="${cellElement.showLabel}" class="barcode-text"
                                                         th:style="${'color:' + (cellElement.foreground ?: '#000000') + ';font-size:' + (cellElement.fontSize ?: 14) + 'px;'}"
                                                         th:text="${cellElement.value}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </th:block>
                            </th:block>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>